<template>
  <div class="">
    <h3>注册</h3>
    <form action="" method="post">
      <input
        type="text"
        name="username"
        placeholder="用户名"
        v-model="username"
      />
      <input
        type="text"
        name="password"
        placeholder="密码"
        v-model="password"
      />
      <input type="submit" value="注册" @click.prevent="register" />
    </form>
    <h3>登录</h3>
    <form action="" method="post">
      <input
        type="text"
        name="username"
        placeholder="用户名"
        v-model="username2"
      />
      <input
        type="text"
        name="password"
        placeholder="密码"
        v-model="password2"
      />
      <input type="submit" value="登录" @click.prevent="login" />
    </form>
    <button @click="getprofile">获取此用户信息</button>
    <button @click="getUsers">查询所有用户</button>
    <form action="" method="post">
      <input type="text" name="type" placeholder="类型" v-model="type" />
      <input type="text" name="content" placeholder="内容" v-model="content" />
      <input type="submit" value="添加问题" @click.prevent="addQuestion" />
    </form>
    <button @click="getQuestion">获取questions</button>
  </div>
</template>

<script>
import {
  reqRegisterAPI,
  reqLoginAPI,
  reqProfileAPI,
  reqUsersAPI,
} from "../api/user";
import { addQuestionAPI, getQuestionAPI } from "../api/question";
import { setToken } from "../utils/auth"; //引入token
export default {
  data() {
    return {
      username: "",
      password: "",
      username2: "",
      password2: "",
      type: "",
      content: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    async register() {
      console.log(11, this.username, this.password);
      const result = await reqRegisterAPI({
        username: this.username,
        password: this.password,
      });
      console.log(result);
    },
    // 登录
    async login() {
      console.log(222, this.username2, this.password2);
      const result = await reqLoginAPI({
        username: this.username2,
        password: this.password2,
      });
      console.log(result);
      if (result.code == 200) {
        //如果登录成功，把token存入cookie
        setToken(result.token);
        //存入vuex状态管理里面
        this.$store.commit("saveToken", result.token);
        //还要存入本地缓存，如何根据本地缓存，防止刷新后 vuex保存的token丢失
        localStorage.setItem("token", result.token);
      }
    },
    //获取用户信息
    async getprofile() {
      const result = await reqProfileAPI();
      console.log(result);
    },
    // 查询所有用户
    async getUsers() {
      const result = await reqUsersAPI();
      console.log(result);
    },
    //添加错题
    async addQuestion() {
      const result = await addQuestionAPI({
        type: this.type,
        content: this.content,
      });
      console.log(result);
    },
    //获取用户的错题
    async getQuestion() {
      const result = await getQuestionAPI();
      console.log(result);
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped></style>
